<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<c:set var="uri" value="${pageContext.request.contextPath}" />
    <meta charset="UTF-8">
    <title>商品</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- bootstrap 3.0.2 -->
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="${pageContext.request.contextPath}/static/bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
            <!-- Ionicons -->
            <link href="${pageContext.request.contextPath}/static/bootstrap/css/ionicons.min.css" rel="stylesheet" type="text/css" />
                <!-- Theme style -->
                <link href="${pageContext.request.contextPath}/static/bootstrap/css/ALTE.css" rel="stylesheet" type="text/css" />
                    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
                    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                    <!--[if lt IE 9]>
                    <script src="${pageContext.request.contextPath}/static/bootstrap/html5shiv.js"></script>
                        <script src="${pageContext.request.contextPath}/static/bootstrap/respond.min.js"></script>
                            <![endif]-->
                            <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/common/page/myPagination.css?t=4" />
                                
                                <style type="text/css">
                                .btnStyle{
                                    margin-left:8px;
                                    margin-top:8px
                                }
                                .loadingModel {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    background-color: rgba(9, 9, 9, 0.63);
                                    width: 100%;
                                    height: 100%;
                                    z-index: 1000;
                                }
                                .loading-content {
                                    width: 50%;
                                    text-align: center;
                                    background: #ffffff;
                                    border-radius: 6px;
                                    line-height: 30px;
                                    z-index: 10001;
                                }
                                </style>
                                </head>
                                <body class="skin-blue">
                                <div id="loadingDiv"></div>
                                <div id="imgModal"></div>
                                <div class="wrapper row-offcanvas row-offcanvas-left">
                                <!-- Right side column. Contains the navbar and content of the page -->
                                <!-- Content Header (Page header) -->
                                <section class="content-header">
                                <h1>
                              商品
                                </h1>
                                </section>
                                <!-- Main content -->
                                <section class="content">
                                <div class="row">
                                <div class="col-md-12">
                                <div class="box">
                                <div class="box-header" style="margin-top:10px;">
                                 
                             <div class="col-md-3">
                                <label>商品名</label>
                                
                  		  <input type="text"  style="width:250px;display:inline"  placeholder="请输入商品名进行查询" id="goodsName" class="form-control">
                  		  
                              </div>
                    
                                 
                     
                     
                   <div class="col-md-1">
                     
                   <a type="button" href="javascript:void(0)" onclick="ajaxList(1)"  style="width:80px;" class="form-control btn btn-success btnStyle" >查询</a>
                    
                     </div>    
                                <div class="row" >
                                <div class="col-md-12" style="margin-top:20px;margin-left:20px;">
                                <span id="batchUpdateDiv">
                                  
                                </span>
                                <span class="l" id="globalBtns">
                             <a type="button" href="AdminGoodsInfoServlet?method=add" onclick=""  style="width:80px;" class="form-control btn btn-success btnStyle" >新增</a>

                                    </span>
                                    </div>
                                    </div>
                                    </div><!-- /.box-header -->
                                    <div class="box-body">
                                    <table class="table table-bordered">
                                    <thead>
                                    <tr  style="text-align:center">
                                    <th>商品名</th>
<th>商品大图</th>
<th>商品价格</th>
<th>库存</th>
<th>销量</th>
<th style="width:200px;">操作</th>

                                    </tr>
                                    </thead>
                                    <tbody id="dataList">
                                    </tbody>
                                    </table>
                                    </div><!-- /.box-body -->
                                    <div id="data_bar" class="box-footer clearfix pagination" style="margin-top:20px;">
                                    </div>
                                    </div><!-- /.box -->
                                    </div><!-- /.col -->
                                    </div><!-- /.row -->
                                    </section><!-- /.content -->
                                    </aside><!-- /.right-side -->
                                    </div><!-- ./wrapper -->
                                    <script type="text/javascript" src="${pageContext.request.contextPath}/static/common/jquery-1.11.1.min.js"></script>
                                        <script type="text/javascript" src="${pageContext.request.contextPath}/static/common/page/myPagination.js"></script>
                                            <!-- Bootstrap -->
                                            <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
                                                <!-- AdminLTE App -->
                                                <script src="${pageContext.request.contextPath}/static/bootstrap/js/AdminLTE/app.js" type="text/javascript"></script>
                                                    <script type="text/javascript" src="${pageContext.request.contextPath}/static/common/utils/listutils.js?v=0645"></script>
                                                            
                                                        <script type="text/javascript">
                                                        $(function(){
                                                              
                                                            ajaxList(1);
                                                        });
                                                        function ajaxList(page) {
                                                         var goodsName=$("#goodsName").val();

                                                            showLoading('${pageContext.request.contextPath}/static/common/loading.gif');
                                                                $.ajax({
                                                                    type : 'get',
                                                                    url : "AdminGoodsInfoServlet?method=getDataList",
                                                                        data : {
                                                                            "goodsName":goodsName,

                                                                             "page":page
                                                                        },
                                                                        success : function(result) {
                                                                            hideLoading();
                                                                             result=$.parseJSON(result);
                                                                            var rows = result.list;//得到数据列
                                                                            var total = result.count;//得到数据总数
                                                                            lastPage=result.totalPage;
                                                                            totalCount=total;
                                                                            var html = '';
                                                                            for (var i = 0; i < rows.length; i++) {
                                                                                html += '<tr>' ;
                                                                                  html+='<td>'+ rows[i].model.goodsName+'</td>';
var goodsImgHtml='';
 if(rows[i].model.goodsImg!=null&&rows[i].model.goodsImg!=''){
 var goodsImgSplit = rows[i].model.goodsImg.split(';');
 	for(var j=0;j<goodsImgSplit.length;j++){
		goodsImgHtml+='<div style="display:inline"><img src="'+goodsImgSplit[j]+'" style="width:100px;height:100px;" onclick="maxImg(this)"></div>';
	}
html+='<td>'+goodsImgHtml+'</td>';
}else{
  html+='<td></td>';
}
  html+='<td>'+ rows[i].model.price+'</td>';
  html+='<td>'+ rows[i].model.stockNum+'</td>';
  html+='<td>'+ rows[i].model.saleNum+'</td>';
	html+='<td>';
html+='<a type="button" href="AdminGoodsInfoServlet?method=update&id='+rows[i].model.id+'" onclick=""  style="width:80px;" class="form-control btn btn-primary btnStyle" >修改</a>';
html+='<a type="button" href="javascript:void(0)" onclick="del(this)" data-id="'+rows[i].model.id+'" style="width:80px;" class="form-control btn btn-danger btnStyle" >删除</a>';
html+='</td>';

                                                                                    html+='</tr>';
                                                                                }
                                                                                if (rows.length == 0) {
                                                                                   html += '<tr><td></td><td></td><td></td><td>无数据</td><td></td><td></td></tr>';
                                                                                }
                                                                                $("#dataList").html(html);
                                                                                new myPagination({
                                                                                    id: 'data_bar',
                                                                                    curPage:page, //初始页码
                                                                                    pageTotal: result.totalPage, //总页数
                                                                                    pageAmount: 10,  //每页多少条
                                                                                    dataTotal: total, //总共多少条数据
                                                                                    pageSize: 5, //可选,分页个数
                                                                                    showPageTotalFlag:true, //是否显示数据统计
                                                                                    showSkipInputFlag:false, //是否支持跳转
                                                                                    getPage: function (page) {
                                                                                        ajaxList(page);
                                                                                    }
                                                                                })
                                                                            }
                                                                        });
                                                                    }
                                                                         
                                                        function del(e){
                                                            if(window.confirm('你确定要删除吗')){
                                                                var id = $(e).attr("data-id");
                                                                $.ajax({
                                                                     type : 'get',
                                                                      url : "AdminGoodsInfoServlet?method=del",
                                                                       data : {
                                                                           "id":id
                                                                       },
                                                                       success : function(result) {
                                                                            result=$.parseJSON(result);
                                                                            alert(result.msg);
                                                                            if(result.code==1){
                                                                                 ajaxList(1);
                                                                             }
                                                                        }
                                                                      });
                                                                return true;
                                                                }else{
                                                                     return false;
                                                                }
                                                           }
                                                      
                                                   
                                                      
                                                                             
                                                                            function gotoPage(e){
                                                                                var url = $(e).attr("data-url");
                                                                                window.location.href=url;
                                                                            }
                                                                            </script>
                                                                            </body>
                                                                            </html>
